<template>
  <div class="activity-items">
    <div class="buttons">
      <el-button
        type="primary"
        icon="el-icon-plus"
        v-if="auth('activity.manager.add')"
        @click="jump({name:'activity.manager.add'})">发布活动</el-button>
      <el-input placeholder="请输入活动标题" v-model="kw" style="width: 500px">
        <el-button slot="append" @click="clearSearch" v-if="kw">清除</el-button>
        <el-button slot="append" @click="search" icon="el-icon-search">搜索</el-button>
      </el-input>
    </div>
    <div class="buttons">
      <el-form :model="showFields">
        <el-checkbox v-model="showFields.id">活动ID</el-checkbox>
        <el-checkbox v-model="showFields.thumb">封面</el-checkbox>
        <el-checkbox v-model="showFields.title">标题</el-checkbox>
        <el-checkbox v-model="showFields.destination">目的地</el-checkbox>
        <el-checkbox v-model="showFields.club_name">俱乐部</el-checkbox>
        <el-checkbox v-model="showFields.stage_num">期数</el-checkbox>
        <el-checkbox v-model="showFields.period">活动日期</el-checkbox>
        <el-checkbox v-model="showFields.days">天数</el-checkbox>
        <el-checkbox v-model="showFields.apply_end_date">截止报名时间</el-checkbox>
        <el-checkbox v-model="showFields.adult_price">成人价格</el-checkbox>
        <el-checkbox v-model="showFields.kid_price">儿童价格</el-checkbox>
        <el-checkbox v-model="showFields.insurance">保险</el-checkbox>
        <el-checkbox v-model="showFields.sign_up_limit">人数限制</el-checkbox>
        <el-checkbox v-model="showFields.area">区域</el-checkbox>
        <el-checkbox v-model="showFields.difficulty">难度</el-checkbox>
        <el-checkbox v-model="showFields.descriptions">活动介绍</el-checkbox>
        <el-checkbox v-model="showFields.way_type">路线类型</el-checkbox>
      </el-form>
    </div>
    <!--// 表格内容-->
    <template>
      <el-table
        v-loading="loading"
        element-loading-text="数据载入中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255, 0.4)"
        :data="items"
        style="width: 100%">
        <el-table-column
          v-if="showFields.id"
          width="60px"
          label="活动ID">
          <template slot-scope="scope">
            {{scope.row.group_stage_id}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.thumb"
          width="60px"
          label="封面">
          <template slot-scope="scope">
            <img :src="imageUrl + scope.row.thumb" style="width: 50px;height: 50px">
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.title"
          width="300px"
          label="标题">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.destination"
          width="200px"
          label="目的地">
          <template slot-scope="scope">
            {{scope.row.destination}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.club_name"
          width="200px"
          label="俱乐部">
          <template slot-scope="scope">
            {{scope.row.club_name}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.stage_num"
          width="170px"
          label="期数">
          <template slot-scope="scope">
            第{{scope.row.stage_num}}.{{scope.row.group_stage_id}}期
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.period"
          width="170px"
          label="活动日期">
          <template slot-scope="scope">
            {{scope.row.start_date}}-{{scope.row.end_date}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.days"
          width="50px"
          label="天数">
          <template slot-scope="scope">
            {{scope.row.days}}天
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.apply_end_date"
          width="130px"
          label="截止报名">
          <template slot-scope="scope">
            {{scope.row.apply_end_date}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.adult_price"
          width="80px"
          label="成人价">
          <template slot-scope="scope">
            {{Number(scope.row.adult_price) / 100}}元
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.kid_price"
          width="80px"
          label="儿童价">
          <template slot-scope="scope">
            {{Number(scope.row.kid_price) / 100}}元
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.insurance"
          width="130px"
          label="保险">
          <template slot-scope="scope">
            {{insurance_type[scope.row.insurance_type]}}({{Number(scope.row.insurance_price) / 100}}元)
          </template>
        </el-table-column>
        <el-table-column
          width="80px"
          v-if="showFields.sign_up_limit"
          label="人数限制">
          <template slot-scope="scope">
            {{scope.row.sign_up_limit}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.area"
          width="160px"
          label="区域">
          <template slot-scope="scope">
            {{scope.row.province_name}}
            {{scope.row.city_name}}
            {{scope.row.county_name}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.difficulty"
          width="200px"
          label="难度">
          <template slot-scope="scope">
            <el-rate
              :max="5"
              :disabled="true"
              :show-text="true"
              :texts="['容易','一般','较难','困难','高强度']"
              v-model="scope.row.difficulty"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.descriptions"
          :show-overflow-tooltip="true"
          label="活动简介">
          <template slot-scope="scope">
            {{scope.row.descriptions}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showFields.way_type"
          label="路线类型">
          <template slot-scope="scope">
            {{({1: '短线', 2: '中线', 3: '长线'})[scope.row.way_type]}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="200px"
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click="
              city_id = scope.row.city_id;
              activity_title = scope.row.title;
              group_stage_id = scope.row.group_stage_id;
              showPointItems  = true;"
              size="little" type="primary">集合点</el-button>
            <el-button
              v-if="auth('activity.manager.edit')"
              @click="jump({
                  name: 'activity.manager.edit',
                  params: {activity_id: scope.row.activity_id}
                })"
              size="little" type="warning">编辑活动</el-button>
            <el-button
              @click="groupDetail(scope.row)"
              size="little" type="warning">团期</el-button>
            <el-button
              size="little"
              type="default"
              @click="
              activity_title = scope.row.title;
              group_stage_id = scope.row.group_stage_id;
              showChangePersonNumber = true;">人数调整</el-button>
            <template v-if="Number(status) !== 0 && status !== 'traveling'">
              <el-button
                v-if="scope.row.status === 99"
                size="little" type="primary" @click="getUpper(scope.row,1)">下架</el-button>
              <el-button
                v-if="scope.row.status === 1 "
                size="little" type="primary" @click="getUpper(scope.row,99)">上架</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <ui-collection-point-items
      :activity-title="activity_title"
      :city-id="city_id"
      :group-stage-id="group_stage_id"
      :show.sync="showPointItems"></ui-collection-point-items>
    <ui-change-person-number
      :show.sync="showChangePersonNumber"
      :activity-title="activity_title"
      :group-stage-id="group_stage_id"></ui-change-person-number>
    <!--编辑团期-->
    <el-dialog
      title="团期信息"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column width="200px" label="开始时间">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  v-model="scope.row.start_time"></el-date-picker>
              </template>
              <template v-else>
                {{scope.row.start_time}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="200px" label="结束时间">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  v-model="scope.row.end_time"></el-date-picker>
              </template>
              <template v-else>
                {{scope.row.end_time}}
              </template>
            </template>
          </el-table-column>
          <el-table-column  label="成人价格">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.adult_price"></el-input>
              </template>
              <template v-else>
                {{scope.row.adult_price}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="儿童价格">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.kid_price"></el-input>
              </template>
              <template v-else>
                {{scope.row.kid_price}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="150px"  label="保险类型">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-radio-group v-model="scope.row.insurance_type">
                  <el-radio :label="2">统一购买</el-radio><br>
                  <el-radio :label="3">自购保险</el-radio><br>
                  <el-radio :label="1">无需保险</el-radio>
                </el-radio-group>
              </template>
              <template v-else>
                {{({1: '无需保险', 2: '统一购买', 3: '自购保险'})[scope.row.insurance_type]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="保险价格">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.insurance_price"></el-input>
              </template>
              <template v-else>
                {{scope.row.insurance_price}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.edit"
                size="little"
                @click="submitGroup(scope.row)"
                type="primary">保存</el-button>
              <el-button
                size="little"
                v-else
                @click="editGroup(scope.row)"
                type="warning">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelEditGroup">取 消</el-button>
    <el-button type="primary" @click="submitEditGroup">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import config from '@config'
  import UiCollectionPointItems from './collection-point-items'
  import UiChangePersonNumber from './change-person-number'
  export default {
    components: {
      UiCollectionPointItems,
      UiChangePersonNumber
    },
    props: {
      status: {
        default: ''
      }
    },
    data () {
      return {
        tableData: [],
        dialogVisible: false,
        showChangePersonNumber: false,
        pickerOptions: {},
        groupStatus: false, // 判断是否在编辑状态
        loading: false,
        city_id: 0,
        group_stage_id: 0,
        activity_title: '',
        destination: '',
        showPointItems: false,
        imageUrl: config.imageUrl,
        items: [],
        groupId: null,
        size: 15,
        page: 1,
        total: 0,
        kw: '',
        difficulty: {
          1: '容易',
          2: '一般',
          3: '较难',
          4: '困难',
          5: '高强度'
        },
        insurance_type: {
          1: '无需',
          2: '统一购买',
          3: '自购'
        },
        showFields: {
          id: true,
          thumb: false,
          title: true,
          destination: false,
          stage_num: false,
          club_name: false,
          period: true,
          days: true,
          apply_end_date: false,
          adult_price: true,
          kid_price: true,
          insurance: true,
          sign_up_limit: true,
          area: false,
          difficulty: true,
          descriptions: false,
          way_type: false
        }
      }
    },
    watch: {
      $route (route) {
        if (this.$route.params.page) {
          this.page = Number(this.$route.params.page)
        }
        this.getItems()
      },
      showPointItems (val) {
        if (!val) {
          this.getItems()
        }
      },
      showFields: {
        handler (newValue, oldValue) {
          this.storage().set('show-fields', this.showFields)
        },
        deep: true
      }
    },
    methods: {
      /**
       * 清除搜索
       */
      clearSearch () {
        this.kw = ''
        this.page = 1
        this.items = []
        this.getItems()
      },
      /**
       *  搜索
       */
      search () {
        if (!this.kw) {
          this.toast('请输入活动标题关键词', 'warning')
          return false
        }
        this.page = 1
        this.items = []
        this.getItems()
      },
      /**
       *  获取列表
       */
      getItems () {
        this.loading = true
        this
          .$api
          .activity
          .showActivityInfo({
            page: this.page,
            size: this.size,
            kw: this.kw,
            status: this.status
          }).then(r => {
            this.loading = false
            this.total = r.total
            this.items = r.list
            console.log(r.list)
          })
          .catch(() => {
            this.loading = false
          })
      },
      /**
       * 获取团期数据
       * **/
      getGroup (id) {
        this
          .$api
          .activity
          .groupInfo(id)
          .then(r => {
            console.log(r)
            this.loading = false
            this.tableData = []
            this.tableData.push(r)
            this.tableData.map(item => {
              this.$set(item, 'edit', false)
            })
          })
      },
      /**
       * 提交团期数据
       * */
      submitGroupData (data) {
        this
          .$api
          .activity
          .groupStage(data)
          .then(r => {
            this.toast('修改成功')
            this.groupStatus = false
            console.log(r)
            this.loading = false
            this.getGroup({group_stage_id: this.groupId})
          })
      },
      /**
       * 点击修改团期 group_stage_id activity_id
       */
      groupDetail (data) {
        console.log(data)
        this.groupId = data.group_stage_id
        // this.activityDetailData = data
        this.dialogVisible = true
        this.getGroup({group_stage_id: data.group_stage_id})
      },
      // 关闭编辑团期弹框
      cancelEditGroup () {
        this.dialogVisible = false
        this.tableData = []
      },
      submitEditGroup () {
        if (this.groupStatus) {
          this.toast('当前修改内容未保存，请保存后再关闭', 'warning')
        } else {
          this.dialogVisible = false
          this.tableData = []
        }
      },
      // 点编辑按钮显示编辑框
      editGroup (data) {
        data.edit = true
        this.groupStatus = true
      },
      // 修改团期数据
      submitGroup (data) {
        this.submitGroupData(data)
      },
      // 关闭弹框
      handleClose (done) {
        done()
        this.tableData = []
      },
      /**
       * 更改活动状态（上下架）
       */
      getUpper (_data, updown) {
        // alert(1)
        let data = [{id: _data.group_stage_id, status: updown}]
        this
          .$api
          .activity
          .upper(data)
          .then(r => {
            if (updown === 1) {
              this.toast('下架成功')
              this.getData()
            } else {
              this.toast('上架成功')
              this.getData()
            }
          })
          .catch(() => {
            this.loading = false
          })
        this.getItems()
      },
      /**
       * 页码改变事件
       */
      currentPage (page) {
        this.jump({
          name: 'activity.manager.items.' + this.status,
          params: {
            page: page
          }
        })
      }
    },
    /**
     * 编辑数据
     */
    created () {
      if (this.$route.params.page) {
        this.page = Number(this.$route.params.page)
      }
      let showFields = this.storage().get('show-fields')
      if (showFields && showFields instanceof Object) {
        this.showFields = showFields
      }
      this.pickerOptions = Object.assign({}, this.pickerOptions, {
        disabledDate: (time) => {
          return (time.getTime() + 3600 * 24) < this.getDayStartTimeStamp()
        }
      })
      this.getItems()
      // this.getUpper()
    }
  }
</script>
<style lang="sass">
  .el-table__expanded-cell[class*=cell]
    padding: 20px 0 20px 50px
    .item
      .el-button--little.el-button + .el-button
        margin: 0 0 0 5px
</style>
<style scoped lang="sass">
  .buttons
    .el-checkbox
      margin: 0 30px 0 0
    .activity-items
      width: 100%
      height: 100%
      .pages
        margin-top: 1rem
    .group-stage
      width: 100%
      height: 100%
    .collection-item
      width: 100%
      min-height: 41px
      display: flex
      align-items: center
      justify-content: center
      &:hover
        background-color: #f4f4f4
      .item
        height: 100%
        flex: 1
        display: flex
        align-items: center
        padding-left: 1rem
</style>
